<template>
  <div class="bar-view chart-container">
    <div class="chart-item" v-for="(chart, index) in chartComponents" :key="chart.name" @click="openChartPreview(chart.component)">
      <component :is="chart.component" />
      <h3>{{ index + 1 }}. {{ chart.label || '柱状图' }}</h3>
    </div>
  </div>
  <ChartPreview ref="chartPreviewRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChartPreview from '@/components/chartPreview.vue';
import BarChart01 from './components/barChart01.vue';
import BarChart02 from './components/barChart02.vue';
import BarChart03 from './components/barChart03.vue';
import BarChart04 from './components/barChart04.vue';
import BarChart05 from './components/barChart05.vue';
import BarChart06 from './components/barChart06.vue';
import BarChart07 from './components/barChart07.vue';
import BarChart08 from './components/barChart08.vue';
import BarChart09 from './components/barChart09.vue';
import BarChart10 from './components/barChart10.vue';
import BarChart11 from './components/barChart11.vue';
import BarChart12 from './components/barChart12.vue';
import BarChart13 from './components/barChart13.vue';
import BarChart14 from './components/barChart14.vue';
import BarChart15 from './components/barChart15.vue';
import BarChart16 from './components/barChart16.vue';
import BarChart17 from './components/barChart17.vue';
import BarChart18 from './components/barChart18.vue';
import BarChart19 from './components/barChart19.vue';
import BarChart20 from './components/barChart20.vue';
import BarChart21 from './components/barChart21.vue';
import BarChart22 from './components/barChart22.vue';
import BarChart23 from './components/barChart23.vue';
import BarChart24 from './components/barChart24.vue';
import BarChart25 from './components/barChart25.vue';
import BarChart26 from './components/barChart26.vue';

const chartComponents = [
  { name: 'BarChart01', component: BarChart01, label: '柱状趋势图' },
  { name: 'BarChart02', component: BarChart02, label: '柱状对比图' },
  { name: 'BarChart03', component: BarChart03, label: '横向柱状图' },
  { name: 'BarChart04', component: BarChart04, label: '横向柱状图' },
  { name: 'BarChart05', component: BarChart05, label: '渐变色柱状图' },
  { name: 'BarChart06', component: BarChart06, label: '柱状图' },
  { name: 'BarChart07', component: BarChart07, label: '瀑布柱状图' },
  { name: 'BarChart08', component: BarChart08, label: '柱状图' },
  { name: 'BarChart09', component: BarChart09, label: '柱状图' },
  { name: 'BarChart10', component: BarChart10, label: '柱状图' },
  { name: 'BarChart11', component: BarChart11, label: '柱状图' },
  { name: 'BarChart12', component: BarChart12, label: '柱状图' },
  { name: 'BarChart13', component: BarChart13, label: '柱状图' },
  { name: 'BarChart14', component: BarChart14, label: '柱状图' },
  { name: 'BarChart15', component: BarChart15, label: '柱状图+折线图' },
  { name: 'BarChart16', component: BarChart16, label: '柱状图' },
  { name: 'BarChart17', component: BarChart17, label: '柱状图' },
  { name: 'BarChart18', component: BarChart18, label: '3D柱状图' },
  { name: 'BarChart19', component: BarChart19, label: '柱状图' },
  { name: 'BarChart20', component: BarChart20, label: '3D柱状图' },
  { name: 'BarChart21', component: BarChart21, label: '多柱状图' },
  { name: 'BarChart22', component: BarChart22, label: '横向柱状图' },
  { name: 'BarChart23', component: BarChart23, label: '多柱状图' },
  { name: 'BarChart24', component: BarChart24, label: '柱状图' },
  { name: 'BarChart25', component: BarChart25, label: '柱状图' },
  { name: 'BarChart26', component: BarChart26, label: '柱状图' },
];

const chartPreviewRef = ref(null);
const openChartPreview = (component) => {
  chartPreviewRef.value.open(component);
};
</script>

<style scoped></style>
